<template>
  <view>
    <u-tabs
      class="tabs"
      :list="tabBar"
      :is-scroll="false"
      :current="current"
      @change="change"
      bar-width="60"
      active-color="#E73835"
      :bold="false"
      duration="0.1"
    ></u-tabs>
    <div class="content">
      <Active
        :activity="activity[current].list"
        v-if="activity[current].flag"
      ></Active>
    </div>
  </view>
</template>

<script>
import Active from '@/components/active'
import { getSingleActivity } from '@/api'
import { tabBar } from '@/api/local-data'
Object.freeze(tabBar)
export default {
  components: {
    Active
  },
  data() {
    return {
      tabBar,
      current: 0,
      activity: [
        {
          flag: false,
          type: 'processing',
          list: []
        },
        {
          flag: false,
          type: 'preparing',
          list: []
        },
        {
          flag: false,
          type: 'over',
          list: []
        }
      ]
    }
  },
  created() {
    this.getActivity()
  },
  methods: {
    change(index) {
      this.current = index
      this.getActivity()
    },
    getActivity() {
      const arr = this.activity[this.current]
      getSingleActivity(arr.type).then(res => {
        arr.list = res.data
        arr.flag = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  overflow-y: scroll;
  height: calc(100vh - 80rpx);
  -webkit-overflow-scrolling: touch;
}
</style>
